/* eslint-disable */
<template>
	<!-- 自定义绑定模块 -->
	<el-dialog class="appendModule" :title="$t('components.appendModule.title')" :visible.sync="appendModuleVisible" :close-on-click-modal="false"  width="50%"   @close="close">
		<el-row>
		  <el-col :span="24">
		  	<el-form   :inline="false" :model="dataRoleRow" ref="dataRoleRow"  label-width="100px">
		  		<el-form-item  :label="$t('common.subsysName')+'：'" >
					<el-input  readonly v-model="dataRoleRow.subsysName" :placeholder="$t('common.inputPlaceholder')"></el-input>
				</el-form-item>
				<el-form-item :label="$t('common.roleName')+'：'"  >
					<el-input  readonly v-model="dataRoleRow.roleName" :placeholder="$t('common.inputPlaceholder')"></el-input>
				</el-form-item>
				<el-form-item :label="$t('common.moduleDetail')+'：'"  >
					<div class="border-box left">
				 		<el-tree ref="moduleTree"  v-loading="loadind3" node-key="moduleId" :default-expanded-keys="defaultExpandedKeys"  :default-checked-keys="defaultCheckedKeys" :data="treedata" show-checkbox  :props="defaultProps" ></el-tree>
				 	</div>
				</el-form-item>
			</el-form>
		  </el-col>
		</el-row>
		<div slot="footer" class="dialog-footer">
			<el-button @click="giveUp">{{$t('common.giveUp')}}</el-button>
			<el-button type="primary" @click="saveModuleSelected">{{$t('common.save')}}</el-button>
		</div>
	</el-dialog>
	<!-- 自定义绑定模块 -->
</template>

<script>
import {
    Message, Notification, MessageBox, Loading
} from 'element-ui'
export default {
    name: 'appendModule',
    props: [
        'visible', 'formInfo'
    ],
    data () {
        return {
            appendModuleVisible: false,
            dataRoleRow: {},
            defaultProps: {
				children: 'childs',
				label: 'moduleName'
			},
			loadind3: false,
			treedata: [],
			currentCheckedKeys: [],
			defaultCheckedKeys: [],
			defaultExpandedKeys: []
        }
    },
    watch: {
        visible: 'visibleChange'
    },
    mounted () {
    },
    methods: {
        visibleChange (val) { // 可选项发生变化时候触发
            this.appendModuleVisible = val
            if (val) {
                this.dataRoleRow = this.$deepCopy(this.formInfo)
                this.searchTreeNode()
            }
        },
		searchTreeNode () { // 加载模块
            let param = {
                roleId: this.dataRoleRow.roleId,
                subsysCode: this.dataRoleRow.subsysCode
            }
            let urlH = "/dev-basp-system/role/selectOptionalAndSelected"
			this.loadind3 = true
            const that = this
            this.$httpExt().post(urlH, param)
			.then((response) => {
				that.loadind3 = false
				let body = response.result
				that.treedata = body.optional
				that.defaultExpandedKeys.push(this.treedata[0].moduleId)
				that.defaultCheckedKeys = body.selected
			}, (response) => {
				this.loadind3 = false
				Notification.error({
					title: this.$t('common.exception'),
					message: response.msg ? response.msg : this.$t('common.exceptionWornText')
				})
			})
		},
		saveModuleSelected () { // 绑定勾选
			this.currentCheckedKeys = this.$refs.moduleTree.getCheckedKeys()
			this.$emit('saveModuleSelected', this.currentCheckedKeys)
		},
		close () {
			this.$emit('close')
		},
		giveUp () {
			this.$emit('giveUp')
		}
    }
}
</script>
<style lang="less">
.appendModule{
	.el-input,.el-textarea {
		width:320px;
	}
	.remark{
		width:450px;
		font-size: 12px;
	    color: #909399;
	    line-height: inherit;
	    min-height: 40px;
	    margin-bottom: 22px;
	    margin-left: 4px;
	}
	.border-box{
		width:100%;
		height:340px;
		overflow: auto;
		border: 1px solid #DCDFE6;
		border-radius: 2px;
		box-sizing: border-box;
	}
}
</style>
